<template>
  <!--  TODO 新增支出包含了 0->其他付款 1->采购付款 2->销售退款 不然重复代码过多 可以在列表中直接发起 -->
  <el-dialog v-model="visible" :title="type == null || type === '' ? '新增支出' : '新增支出 - ' + expenditureTypeOption[type].label" destroy-on-close width="60%" :close-on-click-modal="false" @close="close">
    <div class="mb-2 flex items-center text-sm">
      <el-form :model="formData" :rules="formRules" size="small" ref="expenditureFormRef" label-width="110px" class="drawer-form">
        <el-form-item prop="title" label="主题：">
          <el-input v-model="formData.title" placeholder="请输入事项主题" maxlength="32" clearable style="width: 400px;"/>
        </el-form-item>
        <el-form-item label="描述：" prop="content">
          <editor v-model="formData.content" placeholder="请输入事项描述" height="250px"/>
        </el-form-item>
        <el-form-item prop="expenditureType" label="支出类型：">
          <el-select v-model="formData.expenditureType" style="width: 300px; height: 26px;" size="small" :disabled="type != null && type !== ''"
                     placeholder="请选择" clearable @change="changeExpenditureType">
            <el-option v-for="item in expenditureTypeOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="关联：">
<!--          <module-relate-by-money :relate-items="formData.relateItems" :selected="selectedCode"/> -->

          <module-relate :relate-items="formData.relateItems" :limiter="limiter" @required="required"/>
        </el-form-item>
        <el-form-item prop="collectionTime" label="付款日期：">
          <el-date-picker style="width:125px;" v-model="formData.paymentTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" size="small"/>
        </el-form-item>
        <el-form-item prop="amount" :label="formData.expenditureType === '1' ? '本次付款金额：' : '付款金额：'" class="inline">
          <el-input v-model="formData.amount" type="number" placeholder="金额" style="width: 300px;" clearable :disabled="formData.expenditureType !== '0'"/>
        </el-form-item>
        <el-form-item prop="paymentType" label="付款类别：" class="inline">
          <el-select v-model="formData.paymentType" style="width: 300px; height: 26px;" size="small" placeholder="请选择" clearable>
            <el-option v-for="item in paymentTypeOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="accountType" label="付款账户：" class="inline">
          <el-input v-model="formData.paymentAccount" placeholder="收款账户" style="width: 300px;"/>
        </el-form-item>
        <el-form-item prop="accountNumber" label="付款账号：" class="inline">
          <el-input v-model="formData.paymentNumber" placeholder="收款账号" style="width: 300px;"/>
        </el-form-item>
        <el-form-item prop="type" label="支出类别：" class="inline" v-if="formData.expenditureType === '1'">
          <el-select v-model="formData.type" style="width: 300px; height: 26px;" size="small" placeholder="请选择" clearable>
            <el-option v-for="item in expenditureOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="confirmedBy" label="付款确认人：">
          <el-select v-model="formData.confirmedBy" style="width: 300px; height: 26px;" size="small" placeholder="请选择" clearable disabled>
            <el-option v-for="item in userOption" :label="item.nickname" :value="item.userId"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="lineFile" label="附件：">
          <el-upload class="upload-demo" drag
                     :action="action"
                     :multiple="false"
                     :auto-upload="false"
                     :headers="headers"
                     @change="changeSupplierFile"
                     style="width:100%">
            <el-icon class="el-icon--upload">
              <ele-UploadFilled/>
            </el-icon>
            <div class="el-upload__text">
              拖拽上传或 <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="remark" label="备注：" class="remark-item">
          <el-input type="textarea" v-model="formData.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="cancel(expenditureFormRef)">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="expenditureSubmit(expenditureFormRef)">保存</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script>
import {reactive, toRefs, ref, computed} from 'vue'
import Editor from '/@/components/editor/index.vue'
import ModuleRelateByMoney from '/@/views/matter/components/ModuleRelateByMoney.vue'
import Cookies from "js-cookie";
import { Session } from '/@/utils/storage'
import ModuleRelate from '/@/views/matter/components/ModuleRelate.vue'
import { formatDate } from '/@/utils/formatTime'
import {getEnterpriseUsers} from '/@/api/sys/user';

export default {
  name: 'Expenditure',
  emits: ['onSubmit', 'update:dialogDrawer'],
  props: {
    dialogDrawer: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: null
    }
  },
  components: {
    Editor,
    ModuleRelateByMoney,
    ModuleRelate
  },
  setup(props, context) {
    let expenditureFormRef = ref()
    const { dialogDrawer,type } = toRefs(props)
    let visible = computed({
      get: () => {
        if (dialogDrawer.value){
          if (type.value != null){
            state.formData.expenditureType = type.value
            state.limiter.number = type.value
          }

          getEnterpriseUsers().then(res => {
            state.userOption = res.data
            state.formData.createUserId = Cookies.get('userId')
            state.formData.confirmedBy = Cookies.get('userId')
          })

          state.formData.paymentTime = formatDate(new Date, 'YYYY-mm-dd HH:MM:SS')
        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      required:[],
      userOption:[],
      action: '#',
      headers: {'17work': Session.get('token')},
      selectedCode: {
        code: 'Money',   // 一级关联项数据code
        dataId: null // 二级关联项数据id
      },
      fileList:[],
      formData:{
        title:'',
        content:'',
        relateItems:[],
        expenditureType:'',
        paymentTime:'',
        amount:'',
        type:'',
        paymentAccount:'',
        paymentNumber:'',
        remark:''
      },
      formRules:{
        expenditureType:[{ required: true, trigger: 'blur', message: '请选择'}],
        amount:[{ required: true, trigger: 'blur', message: '请输入'}],
      },
      expenditureTypeOption:[  //考虑放到字典
        {
          label:'其他付款',
          value:'0'
        },
        {
          label:'采购付款',
          value:'1'
        },
        {
          label:'销售退款',
          value:'2'
        },
        {
          label:'付款单',
          value:'3'
        },
        {
          label:'报销单',
          value:'4'
        },
        {
          label:'备用金',
          value:'5'
        },
        {
          label:'备用金(还款)',
          value:'6'
        }
      ],
      expenditureOption:[
        {
          label:'支出类别',
          value:'0'
        }
      ],
      paymentTypeOption:[
        {
          label:'付款类别',
          value:'0'
        }
      ],
      limiter:{
        module:"expenditure", //代表哪一个钱模块
        number:null  //代表限制编号
      },
    })

    /**
     * 通用方法
     */
    //关闭时触发
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    //提交
    const expenditureSubmit = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (!valid) return // 必填没有填就直接结束
        context.emit('onSubmit', true)
      })
    }
    //取消
    const cancel = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
      context.emit("update:dialogDrawer", false)
    }
    //文件变更时
    const changeSupplierFile = (file,fileList) => {
      state.fileList = fileList
    }
    //变更支出类型
    const changeExpenditureType = (val) => {
      state.limiter.number = val
    }


    return{
      ...toRefs(state),
      dialogDrawer,
      visible,
      expenditureFormRef,
      ModuleRelate,
      close,
      expenditureSubmit,
      cancel,
      changeSupplierFile,
      changeExpenditureType

    }
  }
}
</script>

<style scoped>
.inline{
  display: inline-flex;
  width: 50%;
}

:deep input[disabled] {
  -webkit-text-fill-color: #383838 !important;
  -webkit-opacity: 1;
  opacity: 1;
  cursor: not-allowed;
}
</style>
